<template>
  <div class="year">
    <el-date-picker
      type="year"
      class="picker-year"
      value-format="yyyy"
      v-model="beginYear"
      @change="beginYearChange"
      placeholder="请选择开始年度"></el-date-picker>
    <span>至</span>
    <el-date-picker
      type="year"
      class="picker-year"
      value-format="yyyy"
      v-model="endYear"
      @change="endYearChange"
      placeholder="请选择结束年度"></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'yearPickerRange', // 年范围选择
  data () {
    return {
      beginYear: '',
      endYear: ''
    }
  },
  methods: {
    beginYearChange (value) {
      if (parseInt(this.endYear) < parseInt(value)) {
        const year = value
        this.beginYear = this.endYear
        this.endYear = year
      }
      const years = [this.beginYear, this.endYear]
      this.$emit('change', years)
    },
    endYearChange (value) {
      if (parseInt(value) < parseInt(this.beginYear)) {
        const year = value
        this.endYear = this.beginYear
        this.beginYear = year
      }
      const years = [this.beginYear, this.endYear]
      this.$emit('change', years)
    },
    handleEmpty () {
      this.beginYear = ''
      this.endYear = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.year{
  display: flex;
  justify-content: space-between;
  span{
    width: 32px;
    text-align: center;
  }
  .picker-year{
    width: calc(50% - 18px);
  }
}
</style>
